<template>
  <div>
    <RouterLink to="/detail/100">新闻1</RouterLink>
    <br />
    <br />
    <RouterLink to="/detail/200">新闻2</RouterLink>
    <hr />
    <h3>详情页面</h3>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  // 路由进入时触发
  beforeRouteEnter(to, from) {
    console.log('组件内 -- beforeRouteEnter')
  },
  // 离开当前路由
  beforeRouteLeave(to, from) {
    console.log('组件内 -- beforeRouteLeave')
  },
  // 动态路由参数切换时，触发的守卫
  beforeRouteUpdate(to, from) {
    console.log('组件内 -- beforeRouteUpdate')
    console.log(to.params)
  }
})
</script>

<style scoped></style>
